<template>
    <el-card class="user-container" header="个人介绍">
        <div class="box-center">
            <el-avatar :size="100" :src="UserAvater" class="avater" />
            <div class="user-name">
                <h4>{{ UserName }}</h4>
            </div>
            <div class="user-admin">
                {{ UserAdmin ? '管理员' : '普通用户' }}
            </div>
        </div>
        <!-- 项目介绍 -->
        <div class="project-bio-section">
            <div class="project-bio-header">
                <!-- 小图标加项目介绍 -->
                <el-icon size="18px">
                    <Memo />
                </el-icon>
                <span>项目介绍</span>
            </div>
        </div>
        <div class="project-bio-body">
            <div class="textmuted">
                《vue3 vue3-element-admin 实现后台前端综合解决方案》项目演示
            </div>
        </div>
        <!-- 具体功能 -->
        <div class="project-bio-section">
            <div class="project-bio-header">
                <el-icon size="18px"><Printer /></el-icon>
                <span>项目功能</span>
            </div>
        </div>
        <div class="project-bio-body">
            <div class="profress-item" v-for="item in pros.featureData" :key="item.id">
               <h4>{{ item.title }}</h4>
               <el-progress :percentage="item.percentage" status="success" />
            </div>
        </div>
    </el-card>
</template>

<script setup>
import { Getdata } from "@/hooks/getUserData.js";
import {defineProps} from 'vue'
const { userdata } = Getdata() // 用户信息
const UserAvater = userdata.value.photo // 用户头像路径
const UserName = userdata.value.username // 用户名
const UserAdmin = userdata.value.admin // 身份，管理员或普通用户
const pros = defineProps(['featureData'])

</script>


<style lang="scss" scoped>
i{
    margin-top: 10px;
}
.box-center {
    position: relative;
    left: 30%;

    .user-name,
    .user-admin {
        margin-left: 30px;
    }

    .user-admin {
        color: gray;
        font-size: 12px;
        margin-top: -10px;
        margin-left: 35px
    }
}

.project-bio-body {
    margin-top: 10px;
    border-top: 1px solid gray;
    font-size: 14px;
    color: gray;
}
</style>